import React from "react";
import { Space, Table, Tag, Tooltip, } from "antd";
import { DeleteTwoTone, EditTwoTone, StarTwoTone, CheckCircleTwoTone, CloseCircleTwoTone, } from '@ant-design/icons';
import '../styles/TableData.scss'

const getTableHeight = () => {
  const height = window.innerHeight;
  return height - 388;
}

const TableData = ({ 
  data, 
  handleDel, 
  handleUpdateMarkStatus, 
  handleEdit, 
  setSelectList,
  changeFinishStatus
}) => {
  const columns = [
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 60,
      render: (status) => {
        return +status === 1 ? <span className="ing"></span> : <span className="finished"></span> 
      }
    },
    {
      title: "项目名称",
      dataIndex: "project_name",
      key: "project_name",
      width: 90,
      render: (project_name) => <Tag bordered={false} color="processing">{project_name}</Tag>
    },
    {
      title: "类型",
      dataIndex: "type_name",
      key: "type_name",
      width: 90,
      render: (type_name) => <Tag bordered={false} color="error">{type_name}</Tag>
    },
    {
      title: "语言",
      dataIndex: "language_name",
      key: "language_name",
      width: 90,
      render: (language_name) => <Tag bordered={false} color="warning">{language_name}</Tag>
    },
    {
      title: "内容",
      dataIndex: "content",
      key: "content",
      onCell: ()=>{
        return {
          style:{
            maxWidth: 100,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer'
          }
        }
      },
      render: (text)=><Tooltip title={text}>{text}</Tooltip>
    },
    {
      title: "实施方案",
      dataIndex: "implementation",
      key: "implementation",
      onCell: ()=>{
        return {
          style:{
            maxWidth: 100,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer'
          }
        }
      },
      render: (text)=><Tooltip title={text}>{text}</Tooltip>
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
      onCell: ()=>{
        return {
          style:{
            maxWidth: 100,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer'
          }
        }
      },
      render: (text)=><Tooltip title={text}>{text}</Tooltip>
    },
    {
      title: "开始时间",
      dataIndex: "start_on",
      key: "start_on",
      width: 120,
      render: (start_on) => <span>{start_on.slice(0, 10)}</span>
    },
    {
      title: "完成时间",
      dataIndex: "finish_on",
      key: "finish_on",
      width: 120,
      render: (finish_on) => <span>{finish_on ? finish_on.slice(0, 10) : ''}</span>
    },
    // {
    //   title: "附件",
    //   dataIndex: "fileList",
    //   key: "fileList",
    //   width: 80,
    //   render: (fileList) => <button onClick={() => console.log(fileList)}>打印</button>
    // },
    {
      title: "操作",
      key: "action",
      render: (_, row) => (
        <Space size="middle">
          <Tooltip title="编辑">
            <EditTwoTone onClick={() => handleEdit(row)}/>
          </Tooltip>
          {
            row.finish_on ? (
              <Tooltip title="取消完成">
                <CloseCircleTwoTone twoToneColor="#eb2f96" onClick={() => changeFinishStatus(row, 'cancel')} />
              </Tooltip>
            ) : (
              <Tooltip title="完成">
                <CheckCircleTwoTone twoToneColor="#82E673" onClick={() => changeFinishStatus(row, 'finish')} />
              </Tooltip>
            )
          }
          {
            +row.mark === 0 ? (
              <Tooltip title="收藏">
                <StarTwoTone onClick={() => handleUpdateMarkStatus(row)} />
              </Tooltip>
            ) : (
              <Tooltip title="取消收藏">
                <StarTwoTone twoToneColor="#fcd53f" onClick={() => handleUpdateMarkStatus(row)} />
              </Tooltip>
            )
          }
          <Tooltip title="删除">
            <DeleteTwoTone twoToneColor="#eb2f96" onClick={() => handleDel(row)} />
          </Tooltip>
        </Space>
      ),
    },
  ];
  // 筛选
  const rowSelection = {
    type: 'checkbox',
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectList(selectedRows)
    },
    // getCheckboxProps: (record) => ({
    //   disabled: record.name === 'Disabled User',
    //   name: record.name,
    // }),
  }
  return (
    <div className="pdca-table-data">
      <Table 
        scroll={{y: getTableHeight()}} 
        columns={columns} 
        dataSource={data} 
        pagination={false}
        rowSelection={rowSelection}
      />
    </div>
  )
};
export default TableData;
